<template>
  <div class="dashboard-editor-container">

    <panel-group
      :dash-board-top-data="allChartData.dashBoardTopDto"
      @handleSetLineChartData="handleSetLineChartData"
    />
    <div align="right">

      <el-button-group>
        <el-button v-if="begin === true" type="danger" plain @click.native="endIntervalHandler">
          关闭循环统计图
        </el-button>
        <el-button v-else type="success" plain @click.native="beginIntervalHandler">
          开启循环统计图
        </el-button>
      </el-button-group>
    </div>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <component
        :is="currentType"
        :household-data-array="householdTimeAndCountDto"
        :heatingcap-data-array="villageAndHeatingCapacityDto"
        :heatingarea-data-array="villageAndHeatingAreaDto"
        :heatingamount-data-array="amountAndDateDto"
      />
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="32" :sm="32" :lg="12">
        <div class="chart-wrapper">
          <raddar-chart
            :width="'100%'"
            :height="'400px'"
            :quarterly-data-obj="RaddarChartData"
          />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <pie-chart
            :width="'100%'"
            :height="'400px'"
            :expanse-statisics-obj="expanseStatisicsData"
          />
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="8">
      <!--      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
        <transaction-table />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
        <box-card />
      </el-col>-->
      <el-col :xs="24" :sm="24" :lg="32">
        <div class="chart-wrapper">
          <bar-chart
            :width="'100%'"
            :height="'400px'"
            :mounth-order-obj="mounthOrderData"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChartHousehold from './components/LineChartModal/LineChartHousehold'
import LineChartHeatingCap from './components/LineChartModal/LineChartHeatingCap'
import LineChartHeatingArea from './components/LineChartModal/LineChartHeatingArea'
import LineChartHeatingAmount from './components/LineChartModal/LineChartHeatingAmount'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import TransactionTable from './components/TransactionTable'
import BoxCard from './components/BoxCard'
import { getAllSatistiData } from '@/api/base'
const { Message } = require('element-ui')
export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    LineChartHousehold,
    LineChartHeatingCap,
    LineChartHeatingArea,
    LineChartHeatingAmount,
    RaddarChart,
    PieChart,
    BarChart,
    TransactionTable,
    BoxCard
  },
  data() {
    return {
      allChartData: {}, // 所有数据集
      householdTimeAndCountDto: {},
      villageAndHeatingCapacityDto: {},
      villageAndHeatingAreaDto: {},
      amountAndDateDto: {},
      currentType: 'LineChartHousehold',
      RaddarChartData: {
        data: []
      },
      expanseStatisicsData: {},
      mounthOrderData: {},
      timer: null,
      begin: false // 是否开启循环标志
    }
  },
  beforeDestroy() {
    // js提供的clearInterval方法用来清除定时器
    clearInterval(this.timer)
  },
  mounted() {
    this.getAllDataHandler()
    if (this.timer) {
      clearInterval(this.timer)
    } else {
      this.beginIntervalHandler()
    }
  },
  methods: {
    beginIntervalHandler() {
      this.begin = true
      this.timer = null // 每次开启前先清空定时器参数
      const listCir = [
        'LineChartHousehold',
        'LineChartHeatingArea',
        'LineChartHeatingCap',
        'LineChartHeatingAmount'
      ]
      const min = 0
      const max = 3
      this.timer = setInterval(() => {
        this.currentType = listCir[Math.floor(min + Math.random() * (max - min))]
      }, 5000)
    },
    endIntervalHandler() {
      clearInterval(this.timer) // 结束循环
      this.timer = null // 重置定时器循环参数
      this.begin = false
    },
    getAllDataHandler() {
      this.getAllData()
    },
    async getAllData() {
      const res = await getAllSatistiData()
      const resp = res.data.respOutMsgHeader
      const data = res.data.main
      if (resp.respCode === 200) {
        this.allChartData = data
        this.householdTimeAndCountDto = this.allChartData.householdTimeAndCountDto
        this.villageAndHeatingCapacityDto = this.allChartData.villageAndHeatingCapacityDto
        this.villageAndHeatingAreaDto = this.allChartData.villageAndHeatingAreaDto
        this.amountAndDateDto = this.allChartData.amountAndDateDto
        this.expanseStatisicsData = this.allChartData.expanseStatisicsParentDto
        this.formatDataMountData()
        this.formatDataToArray()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    formatDataMountData() {
      // 初始化12个月分的初始值
      const allDataObj = {
        value: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      }
      // 处理源数据并覆盖初始值最后赋值到总数据对象传给子组件使用
      const NameDataArray = this.allChartData.monthOrderInfoStatisicsDto.name
      const ValueDataArray = this.allChartData.monthOrderInfoStatisicsDto.value
      for (let i = 0; i < NameDataArray.length; i++) {
        // 转换每个月份数字字符串为数字
        const monthIndex = parseInt(NameDataArray[i])
        allDataObj.value[monthIndex - 1] = ValueDataArray[i]
      }
      this.mounthOrderData = allDataObj
    },
    formatDataToArray() {
      const data = []
      data.push(this.allChartData.quarterlyStatisticsParentDto.springQuarterlyStatistics === null ? [] : this.allChartData.quarterlyStatisticsParentDto.springQuarterlyStatistics)
      data.push(this.allChartData.quarterlyStatisticsParentDto.summerQuarterlyStatistics === null ? [] : this.allChartData.quarterlyStatisticsParentDto.summerQuarterlyStatistics)
      data.push(this.allChartData.quarterlyStatisticsParentDto.autumnQuarterlyStatistics === null ? [] : this.allChartData.quarterlyStatisticsParentDto.autumnQuarterlyStatistics)
      data.push(this.allChartData.quarterlyStatisticsParentDto.winterQuarterlyStatistics === null ? [] : this.allChartData.quarterlyStatisticsParentDto.winterQuarterlyStatistics)
      this.RaddarChartData.data = data
    },
    handleSetLineChartData(type) {
      if (type === 'householdTimeAndCountDto') { this.currentType = 'LineChartHousehold' } else if (type === 'villageAndHeatingCapacityDto') { this.currentType = 'LineChartHeatingCap' } else if (type === 'villageAndHeatingAreaDto') { this.currentType = 'LineChartHeatingArea' } else { this.currentType = 'LineChartHeatingAmount' }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
